<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>个人信息</span>
    </div>
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="200"
      :height="200"
      field="file"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />
    <div class="user-profile">
      <div class="box-center">
        <pan-thumb
          :image="image"
          :height="'100px'"
          :width="'100px'"
          :hoverable="false"
        >
          <div>
          </div>
          {{ user.role }}
        </pan-thumb>
      </div>
      <div class="box-center">
        <div class="user-name text-center">{{ name }}</div>
        <!-- <div class="user-role text-center text-muted">{{ user.role }}</div> -->
      </div>
      <div class="box-center">
        <el-button type="primary" icon="el-icon-upload" style="margin-left: 0px;" @click="imagecropperShow=true">
          上传头像
        </el-button>
        <el-button type="primary" icon="el-icon-upload" style="margin-left: 20px;" @click="handleUpdatePassword">
          修改密码
        </el-button>
      </div>
    </div>

    <!--    修改密码对话框-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPasswordVisible" :close-on-click-modal="false" customClass="customWidth">
      <div style="width: 100%;" class="scrollbar">
        <el-scrollbar style="height: 100%;">
          <el-form ref="passwordForm" :rules="rules" :model="temp" label-position="left" label-width="150px" style="margin-left:50px;">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="temp.oldPassword" placeholder="请输入旧密码" type="password" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="新密码" prop="loginPassword">
              <el-input v-model="temp.loginPassword" placeholder="请输入新密码" type="password" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="temp.confirmPassword" placeholder="请输入确认密码" type="password" style="width: 80%;" />
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPasswordVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updatePassword()">
          确定
        </el-button>
      </span>
    </el-dialog>
    <div class="user-bio">
    </div>
  </el-card>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import ImageCropper from '@/components/ImageCropper/index'
import { getToken, setItem, getItem } from '@/plugins/auth'

import { updateUser } from '@/api/user'
import { isNotEmpty, zEnBase64 } from '@/plugins'

export default {
  components: { PanThumb, ImageCropper },
  data() {
    return {
      dialogPasswordVisible: false,
      dialogStatus: '',
      imagecropperShow: false,
      imagecropperKey: 0,
      image: getItem('avatar'),
      name: getItem('name'),
      temp: {
        ID: '', // 用户ID
        oldPassword: '', // 登录密码
        loginPassword: '', // 登录密码
        confirmPassword: '' // 确认密码
      },
      rules: {
        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
        loginPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '确认密码不能为空', trigger: 'blur' }]
      },
      textMap: {
        password: '修改密码'
      },
      userInfo: getItem('userInfo') && JSON.parse(decodeURIComponent(getItem('userInfo'))),
    }
  },
  methods: {
    handleUpdatePassword(row) {
      this.dialogStatus = 'password'
      this.dialogPasswordVisible = true
      // this.temp.loginPassword = ''
      // this.temp.ID = row.ID
      this.$nextTick(() => {
        this.$refs['passwordForm'].clearValidate()
      })
    },
    updatePassword() {
      this.$refs['passwordForm'].validate((valid) => {
        if (valid) {
          const { loginPassword, oldPassword} = this.temp;
          if (this.temp.loginPassword !== this.temp.confirmPassword) {
            this.$notify({
              title: '错误',
              message: '两次输入密码不一致！',
              type: 'error',
              duration: 2000
            })
          } else {
            let url =`https://kpinterface.shejidedao.cn/interface-server/api/outSystemUpdateOneUserPassword.json?outToken=${getToken()}&userID=${this.userInfo.userID}&oldLoginPassword=${oldPassword}&loginPassword=${loginPassword}`
            this.axios(url).then((res) => {
                this.dialogPasswordVisible = false
                this.$notify({
                  title: '成功',
                  message: '密码修改成功',
                  type: 'success',
                  duration: 2000
                })
            });
          }
        }
      })
    },
    cropSuccess(resData) {
      let url =`https://kpinterface.shejidedao.cn/interface-server/api/outSystemUpdateOneUserAvatar.json?&outToken=${getToken()}&userID=${this.userInfo.userID}&avatarURL=${resData.url}`
      this.axios(url).then((res) => {
            this.imagecropperShow = false
            this.imagecropperKey = this.imagecropperKey + 1
            setItem('avatar', resData.url)
            this.image = resData.url
            this.$notify({
              title: '更换头像成功',
              message: '更换头像成功',
              type: 'success',
              duration: 1
            })
            this.$router.go(0);
      });
      // let params = ''
      // params += 'ID=' + 123
      // params += ',avatarURL=' + zEnBase64(resData.url)
      // const data = {
      //   token: getToken(),
      //   parameterArray: params
      // }
      // updateUser(data).then(response => {
      //   if (response.header.code === 0) {
      //     this.imagecropperShow = false
      //     this.imagecropperKey = this.imagecropperKey + 1
      //     this.global.avatar = resData.url
      //     this.image = resData.url
      //     this.$notify({
      //       title: '更换头像成功',
      //       message: '更换头像成功',
      //       type: 'success',
      //       duration: 1
      //     })
      //     this.$router.go(0);
      //   } else {
      //     this.$notify({
      //       title: '更换头像失败',
      //       message: response.header.msg,
      //       type: 'error',
      //       duration: 1
      //     })
      //   }
      // }).catch(err => {
      //   console.error(err)
      // })
    },
    close() {
      this.imagecropperShow = false
    }
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: '',
          avatar: '',
          role: ''
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
<style>
  .customWidth{
    width:600px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
</style>
